<template>
  <div class="allorder" v-if="goodinfo">
    <div class="header">
      <div class="header-left">
        <div class="title">订单信息</div>
        <div class="count">
          <span>累计订单:{{ userInfo.pay_count }}</span
          ><span>总消费:¥{{ userInfo.orderStatusSum }}</span>
        </div>
      </div>
      <div class="header-right">
        <img src="../../assets/orderTime.png" alt="" />
      </div>
    </div>
    <div class="main">
      <div class="container">
        <div class="tab">
          <van-tabs v-model="active" @change="tabChange">
            <van-tab>
              <template #title>
                <div>待付款</div>
                <div>{{ userInfo.orderStatusNum.unpaid_count }}</div>
              </template>
            </van-tab>

            <van-tab>
              <template #title>
                <div>待发货</div>
                <div>{{ userInfo.orderStatusNum.unshipped_count }}</div>
              </template>
            </van-tab>

            <van-tab>
              <template #title>
                <div>待收货</div>
                <div>{{ userInfo.orderStatusNum.received_count }}</div>
              </template>
            </van-tab>

            <van-tab>
              <template #title>
                <div>待评价</div>
                <div>{{ userInfo.orderStatusNum.evaluated_count }}</div>
              </template>
            </van-tab>

            <van-tab>
              <template #title>
                <div>已完成</div>
                <div>{{ userInfo.orderStatusNum.complete_count }}</div>
              </template>
            </van-tab>
          </van-tabs>
        </div>

        <div class="goodList" v-if="goodinfo.length != 0">
          <div class="goodinfo" v-for="item in goodinfo" :key="item.id">
            <div class="info-header">
              <div class="header-left">{{ item._pay_time }}</div>
              <div class="header-right">{{ item._status._title }}</div>
            </div>
            <div
              class="info-main"
              v-for="item2 in item.cartInfo"
              :key="item2.id"
            >
              <div class="main-left">
                <img :src="item2.productInfo.image" alt="" />
              </div>
              <div class="main-middle">{{ item2.productInfo.store_name }}</div>
              <div class="main-right">
                <div>¥{{ item2.productInfo.price }}</div>
                <div>×{{ item2.cart_num }}</div>
              </div>
            </div>
            <div class="info-count">
              共{{ item.cartInfo.length }}件商品,总金额<span
                >¥{{ item.pay_price }}</span
              >
            </div>
            <div class="info-detail" v-if="active == 1">
              <div @click="goDetail(item)">查看详情</div>
            </div>
            <div class="info-detail2" v-if="active == 0">
              <div @click="cancel(item.order_id)">取消订单</div>
              <div @click="pay(item.order_id)">立即付款</div>
            </div>
          </div>
        </div>
        <div class="noList" v-else>
          <img src="../../assets/noOrder.png" alt="" />
        </div>
        <van-action-sheet class="sheet" v-model="showpay" title="选择付款方式">
          <div class="content">
            <van-cell
              icon="wechat"
              center
              title="微信支付"
              is-link
              label="使用微信快捷支付"
              @click="payway('weixin')"
            />
            <van-cell
              icon="gold-coin"
              center
              title="余额支付"
              is-link
              @click="payway('yue')"
            >
              <template #label>
                当前可用余额:<span class="money">{{ userInfo.now_money }}</span>
              </template>
            </van-cell>
          </div>
        </van-action-sheet>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex";
export default {
  name: "AllOrder",
  props: {
    index: String,
  },
  methods: {
    getInfo() {
      this.$axios
        .get("api/order/list?page=1&limit=20&type=" + this.active)
        .then((d) => {
          if (d.data.status == 200) {
            this.goodinfo = d.data.data;
            console.log("this.goodinfo==>", this.goodinfo);
          }
        });
    },
    tabChange() {
      //   console.log(this.index);
      this.getInfo();
    },
    cancel(goodId) {
      this.$dialog
        .confirm({
          title: "提示",
          message: "确认取消吗",
        })
        .then(() => {
          this.$axios
            .post("api/order/cancel", {
              id: goodId,
            })
            .then((d) => {
              if (d.data.status == 200) {
                this.$toast(d.data.msg);
                this.getLoginUser();
                this.getInfo();
              }
            });
        })
        .catch(() => {});
    },
    pay(goodId) {
      this.readyId = goodId;
      // console.log(goodId);
      this.showpay = true;
    },
    payway(way) {
      // console.log(this.readyId);
      this.$axios
        .post("api/order/pay", {
          from: "weixinh5",
          paytype: way,
          uni: this.readyId,
        })
        .then((d) => {
          console.log(d);
          if(d.data.status == 200){
            this.$toast(d.data.msg)
            this.getInfo();
            this.showpay = false;
          }else{
            this.$toast(d.data.msg)
            this.showpay = false;
          }
        });
    },
    goDetail(detail) {
      this.$router.push({
        path: "/watchorder",
        query: { orderInfo: detail },
      });
      console.log(detail);
    },

    ...mapActions(["getLoginUser"]),
  },
  data() {
    return {
      active: 0,
      goodinfo: null,
      showpay: false,
      readyId: 0,
    };
  },
  computed: {
    ...mapGetters(["userInfo"]),
  },
  created() {
    this.active = Number(this.index);
    this.getInfo();
  },
};
</script>

<style lang="less">
.allorder {
  .header {
    height: 8rem;
    background-color: #e93323;
    display: flex;
    padding: 1rem;
    justify-content: space-between;
    box-sizing: border-box;
    .header-left {
      color: white;
      height: 3.5rem;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      .title {
        font-weight: 900;
        font-size: 1.1rem;
      }
      .count {
        font-size: 0.8rem;
        color: #ffdcdc;
        span {
          margin-right: 0.8rem;
        }
      }
    }
    .header-right {
      height: 3.5rem;
      img {
        height: 100%;
      }
    }
  }
  .main {
    padding: 0rem 1rem;
    .container {
      background-color: white;
      position: relative;
      .tab {
        position: absolute;
        width: 100%;
        left: 0rem;
        top: -2.5rem;
        box-shadow: 0 0 5px 0px rgba(0, 0, 0, 0.3);
      }
      .van-tabs--line .van-tabs__wrap {
        height: 70px;
        border-radius: 5px;
      }
      .van-tab__text--ellipsis {
        display: block;
        text-align: center;
        color: black;
      }
      .goodList,
      .noList {
        position: absolute;
        top: 2rem;
        width: 100%;
        left: 0rem;
        padding-bottom: 4rem;
        .goodinfo {
          //   height: 13.5rem;
          background-color: white;
          border-radius: 5px;
          margin-top: 0.8rem;
          box-shadow: 0 0 5px -1px rgba(0, 0, 0, 0.3);
          padding: 0.9rem 0.9rem 0.6rem;
          .info-header {
            display: flex;
            justify-content: space-between;
            font-size: 0.9rem;
            color: #3f3f3f;
            align-items: center;
            padding-bottom: 0.6rem;
            border-bottom: 0.08rem solid #e6e6e6;
            .header-left {
            }
            .header-right {
              color: #e93323;
            }
          }
          .info-main {
            display: flex;
            margin: 0.8rem 0rem;
            .main-left {
              width: 4rem;
              height: 4rem;
              flex-shrink: 0;
              img {
                width: 100%;
                height: 100%;
              }
            }
            .main-middle {
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              text-overflow: ellipsis;
              overflow: hidden;
              font-size: 0.85rem;
              height: 2.7rem;
              line-height: 1.4rem;
              margin-left: 0.6rem;
            }
            .main-right {
              margin-left: auto;
              text-align: right;
              font-size: 0.9rem;
              color: #9e9e9e;
              width: 12rem;
            }
          }
          .info-count {
            text-align: right;
            font-size: 0.85rem;
            letter-spacing: 0.03rem;
            padding-bottom: 0.6rem;
            border-bottom: 0.08rem solid #e6e6e6;
            span {
              color: #e93323;
              font-weight: bold;
              font-size: 0.9rem;
            }
          }
          .info-detail,
          .info-detail2 {
            height: 1.9rem;
            margin-top: 0.6rem;
            position: relative;
            div {
              background-color: #e93323;
              height: 1.8rem;
              width: 5.5rem;
              text-align: center;
              line-height: 1.9rem;
              color: white;
              border-radius: 1rem;
              font-size: 0.85rem;
              position: absolute;
              right: 0rem;
              border: 0.05rem solid #e93323;
            }
          }
          .info-detail2 {
            div:nth-child(1) {
              right: 6rem;
              background-color: transparent;
              border: 0.05rem solid #acacac;
              color: #acacac;
            }
          }
        }
      }
      .noList {
        width: 15rem;
        left: 50%;
        margin-left: -7.5rem;
        top: 5rem;
        img {
          width: 100%;
        }
      }
    }
  }
  .sheet {
    padding-bottom: 40px;
    .content {
      .van-cell__left-icon {
        margin-right: 12px;
        font-size: 20px;
      }
      & > div:nth-child(1) {
        .van-cell__left-icon {
          color: #09bb07;
        }
      }
      & > div:nth-child(2) {
        .van-cell__left-icon {
          color: #ff9c07;
        }
        .money {
          color: #ff9c07;
          margin-left: 10px;
        }
      }
    }
  }
}
</style>